<template>
  <div style="background-color:rgb(233, 56, 84)">
<div class="login">
  <div class="login-container">
      <ul class="tab">
        <li style="font-weight:700;">扫描登录</li>
        <li style="font-weight:700;color: rgb(225, 37, 27);">账户登录</li>
      </ul>
      <div class="content">
        <form>
          <i class="iconfont icon-yonghu1"></i>
          <input type="text" v-model="username"/>
          <i class="iconfont icon-mima"></i>
          <input type="password"  v-model="password"/>
          <div class="setting">
            <input type="checkbox" style="width: auto;margin-bottom: 0;vertical-align: middle" checked="true"/>
            <label style="font-size: 12px;">自动登录</label>
                <span style="float:right;font-size: 12px">忘记密码?</span>
          </div>
          <button class="btn" @click.prevent="login">登录</button>
          <a href="javascript:void(0)" style="font-size: 15px;color: #666;float:right;margin-top: 40px" @click="$router.push('/register')">立即注册</a>
        </form>
      </div>
  </div>
</div>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      username:'13700000000',
      password:'111111'
    }
  },
  methods:{
    async login(){
      try {
        await this.$store.dispatch('userLogin', {phone: this.username, password: this.password})
        let toPath=this.$route.query.redirect||'/home'
        await this.$router.push(toPath)
      }catch (error){

      }
    }
  }

}
</script>

<style scoped lang="less">
.iconfont{
  display: inline-block;
  border:1px solid rgb(204, 204, 204);
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  border-right: none;
  line-height: 32px;
}
.btn{
  padding: 6px;
  margin-top: 25px;
  background-color: rgb(225, 37, 27);
  border: 1px solid rgb(225, 37, 27);
  height: 36px;
  width: 330px;
  font-size: 16px;
  color: rgb(255, 255, 255);
}
.content{
  width: 320px;
  padding: 20px 23.5px 18px 18px;
  border-right: 1px solid rgb(221, 221, 221);
  border-bottom: 1px solid rgb(221, 221, 221);
  border-left: 1px solid rgb(221, 221, 221);
  form{
    width: 330px;
    height: 250px;
    input{
      padding: 6px 8px;
      width: 278px;
      height: 18px;
      border: 1px solid rgb(204, 204, 204);
        margin-bottom: 16px;
      outline: none;
    }
  }
}
.tab {
  height: 52px;
  li {
    text-align: center;
    font-size: 20px;
    border: 1px solid rgb(221, 221, 221);
    float: left;
    width: 180px;
    height: 50.5px;
    line-height: 50px;
  }

  li:nth-child(1) {
    border-right: none;
    &:extend(li);
  }

  li:nth-child(2) {
    border-bottom: none;
    &:extend(li);
    border-top-color:rgb(40, 163, 239)
  }
}
  .login {
    width: 1200px;
    margin: 0 auto;
    height: 487px;
    background: url("../../assets/img/login.png") no-repeat rgb(233, 56, 84);
    .login-container {
      float: right;
      position: relative;
      top: 45px;
      margin: 0 32px;
      width: 380px;
      background-color: rgb(255, 255, 255);
      padding: 20px;
    }
  }
</style>
